<template>
    <div class="set-page">
        <div class="top-seach">系统设置
            <span class="left" @click="back"></span>
        </div>

        <div class="a-box">
            <span class="text">推送设置</span>
            <div class="kaiguan-kai" v-show="!kaiguan" @click="kaiqi"><span></span></div>
            <div class="kaiguan-guan" v-show="kaiguan" @click="kaiqi"><span></span></div>
        </div>
        <div class="a-box a">
            <span class="text">关于我们</span>
            <router-link to="/about" class="me"></router-link>
        </div>
        <div class="a-box a">
            <span class="text">联系客服</span>
            <span class="right">400-100000</span>
        </div>
        <div class="a-box a">
            <span class="text">版本更新</span>
            <span class="right">New</span>
        </div>
    </div>
    
</template>



<script>

export default {
    data() {
        return {
            kaiguan:false
        }
    },
    methods:{
        kaiqi:function(){
            this.kaiguan = !this.kaiguan;
        },
        back:function(){
            window.history.back(-1);    
        }
    },
    components:{  
        
    }  
}
</script>

<style lang="less" rel="stylesheet/less">
.set-page{
    padding-top:0.88rem;
    padding-bottom:1.88rem;
   .top-seach{
        width:100%;
        height:0.88rem;
        position:fixed;
        top:0;
        left:0;
        z-index:11;
        background:#00D397;
        line-height:0.88rem;
        text-align:center;
        font-size: 0.34rem;
        color: #FFFFFF;
        .left{
            width:0.2rem;
            height:0.37rem;
            display:inline-block;
            position:absolute;
            left:0.22rem;
            top:0.28rem;
            background:url('left.png') no-repeat;
            background-size:100% 100%;
        }
   } 
   .a-box{
        width:100%;
        height:1rem;
        background: #FFFFFF;
        border-bottom:1px solid #E7E7E7;
        position:relative;
        display: flex;
        justify-content: space-between;
        a{
            width:50%;
            height:100%;
            position:absolute;
            right:0;
            top:0;
        }
        .kaiguan-kai{
            background: #44DB5E;
            border-radius: 60px;
            width:0.78rem;
            height:0.46rem;
            margin-right:0.2rem;
            margin-top:0.27rem;
            position:relative;
            span{
                display:inline-block;
                width:0.42rem;
                height:0.42rem;
                border-radius:50%;
                position:absolute;
                right:0.02rem;
                top:0.02rem;
                background: #FFFFFF;
                border: 0px solid rgba(0,0,0,0.10);
                box-shadow: 0px 5px 2px 0px rgba(0,0,0,0.05), 0px 3px 3px 0px rgba(0,0,0,0.10), 0px 5px 5px 0px rgba(0,0,0,0.05);
            }
        }
        .kaiguan-guan{
            background: #E3F5F0;
            border-radius: 60px;
            width:0.78rem;
            height:0.46rem;
            margin-right:0.2rem;
            margin-top:0.27rem;
            position:relative;
            span{
                display:inline-block;
                width:0.42rem;
                height:0.42rem;
                border-radius:50%;
                position:absolute;
                left:0.02rem;
                top:0.02rem;
                background: #FFFFFF;
                border: 0px solid rgba(0,0,0,0.10);
                box-shadow: 0px 5px 2px 0px rgba(0,0,0,0.05), 0px 3px 3px 0px rgba(0,0,0,0.10), 0px 5px 5px 0px rgba(0,0,0,0.05);
            }
        }
        .text{
            font-size: 0.28rem;
            color: #727272;
            line-height:1rem;
            padding-left:0.3rem;
            display:inline-block;
            height:1rem;
        }
        .right{
            font-size: 0.26rem;
            color: #00D397;
            padding-right:0.64rem;
            display:inline-block;
            height:1rem;
            line-height:1rem;
        }
        &.a:after{
            content:'';
            display:block;
            width:0.14rem;
            height:0.2rem;
            background:url('right.png') no-repeat;
            background-size:100% 100%;
            position:absolute;
            right:0.3rem;
            top:0.42rem;
        }
   }
}
</style>

